<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-text>{{ asdGetter }}</el-text>
    <el-button type="primary" @click="foo">btn1</el-button>
    <el-button type="primary" @click="Addnumber">{{ number }}</el-button>
    <el-button type="primary" @click="ageAdd">{{ age }}</el-button>
    <div ref="defaultDiv">REF</div>
    <div>buildVersion: {{ buildVersion }}</div>
    <Example ref="example" />
  </div>
</template>
<script setup lang="ts">
import Example from '../components/MyExample.vue'
import { computed, onMounted, ref } from 'vue'
// import { $ref } from '@vue-macros/reactivity-transform/macros'
//@ts-ignore
const qwe = 'qwe'

const asd = $ref<string | null>('2312')

let number = $ref<number>(0)

let age = 18
//@ts-ignore
const zxc = ref(null)

const defaultDiv = $ref<HTMLDivElement>()

const example = $ref<InstanceType<typeof Example>>()

const buildVersion = process?.env?.buildVersion ?? ''

onMounted(() => {
  console.debug('defaultDiv', defaultDiv?.innerHTML)
  console.debug('example', example?.msg)
  console.dir(example)
  console.dir(JSON.stringify(example))
})

const foo: () => string = () => {
  console.debug('foo')
  return ''
}

const asdGetter = computed(() => {
  return asd + 'qweqwe'
})
//@ts-ignore
const numberAdd = () => {
  number++
}

function Addnumber() {
  number++
}

function ageAdd() {
  age++
  console.debug(age)
}
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
